<template>
  <view class="horizontal-view" data-eventsync="true" @click="jumpUrl" v-if="this.llgADInfo && this.llgADInfo.type === 1 && show">
    <view class="horizontal-view-title" data-eventsync="true">
      <view data-eventsync="true">{{ this.llgADInfo.title }}</view>
      <image class="close-image" data-eventsync="true" @click.stop="closeAd" src="https://static.wi-fi.cn/omc/202305/5463183a750a2ebfcdc421e835039d5d8a733531.png" mode="scaleToFill"/>
    </view>
    <view class="horizontal-view-body" data-eventsync="true">
      <image class="body-image" data-eventsync="true" :src="this.material_url" mode="scaleToFill"/>
      <image class="logo-sign" data-eventsync="true" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
    </view>
    <view class="horizontal-view-bottom" data-eventsync="true">
      <view class="horizontal-view-bottom-icon" data-eventsync="true">
        <image class="horizontal-view-bottom-icon-image" data-eventsync="true" v-if='this.llgADInfo.brand_logo_url' :src="this.llgADInfo.brand_logo_url" mode=""/>
        <view data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
      </view>
    </view>
  </view>

  <view class="horizontal-view" @click="jumpUrl" data-eventsync="true" v-if="this.llgADInfo && this.llgADInfo.type === 2 && show">
    <image @click.stop="closeAd" class="horizontal-view-close" src="http://static.wi-fi.cn/omc/202407/a028833becaee5573fe635b3df34d66376639829.png" mode=""/>
    <view class="horizontal-view-body" data-eventsync="true">
      <image class="body-image" data-eventsync="true" :src="this.material_url" mode="scaleToFill"/>
      <image class="logo-sign" data-eventsync="true" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
    </view>
    <view class="horizontal-view-title" data-eventsync="true">
      <view data-eventsync="true">{{ this.llgADInfo.title }}</view>
    </view>
    <view class="horizontal-view-bottom" data-eventsync="true">
      <view class="horizontal-view-bottom-icon" data-eventsync="true">
        <image class="horizontal-view-bottom-icon-image" data-eventsync="true"  v-if='this.llgADInfo.brand_logo_url' :src="this.llgADInfo.brand_logo_url" mode=""/>
        <view data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
      </view>
    </view>
  </view>

  <view class="horizontal-view" @click="jumpUrl" data-eventsync="true" v-if="this.llgADInfo && this.llgADInfo.type === 3 && show">
    <view class="horizontal-view-title2" data-eventsync="true">
      <view data-eventsync="true">{{ this.llgADInfo.title }}</view>
      <image data-eventsync="true" class="close-image" @click.stop="closeAd" src="http://static.wi-fi.cn/omc/202407/a028833becaee5573fe635b3df34d66376639829.png" mode="scaleToFill"/>
    </view>
    <view class="horizontal-view-body" data-eventsync="true">
      <image data-eventsync="true" class="body-image" :src="this.material_url" mode="scaleToFill"/>
      <image data-eventsync="true" class="logo-sign" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
    </view>
    <view class="horizontal-view-bottom" data-eventsync="true">
      <view class="horizontal-view-bottom-icon" data-eventsync="true">
        <image class="horizontal-view-bottom-icon-image" data-eventsync="true"  v-if='this.llgADInfo.brand_logo_url' :src="this.llgADInfo.brand_logo_url" mode=""/>
        <view data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
      </view>
    </view>
  </view>

  <view class="horizontal-view" data-eventsync="true"  @click="jumpUrl" v-if="this.llgADInfo && this.llgADInfo.type === 4 && show">
    <image @click.stop="closeAd" class="horizontal-view-close" src="http://static.wi-fi.cn/omc/202407/a028833becaee5573fe635b3df34d66376639829.png" mode=""/>
    <view class="horizontal-view-body2" data-eventsync="true">
      <image class="body-image2" data-eventsync="true" :src="this.material_url" mode="scaleToFill"/>
      <image class="logo-sign" data-eventsync="true" style="top: 0;" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
    </view>
    <view class="horizontal-view-title" data-eventsync="true">
      <view data-eventsync="true">{{ this.llgADInfo.title }}</view>
    </view>
    <view class="horizontal-view-bottom" data-eventsync="true">
      <view class="horizontal-view-bottom-icon" data-eventsync="true">
        <image class="horizontal-view-bottom-icon-image" data-eventsync="true"  v-if='this.llgADInfo.brand_logo_url' :src="this.llgADInfo.brand_logo_url" mode=""/>
        <view data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
      </view>
    </view>
  </view>

  <view class="horizontal-view" @click="jumpUrl" data-eventsync="true" v-if="this.llgADInfo && this.llgADInfo.type === 6 && show">
    <view class="flex-body" data-eventsync="true">
      <view class="flex-column" data-eventsync="true">
        <view class="item-title" data-eventsync="true">{{ this.llgADInfo.title }}</view>
        <view class="flex-item-between" data-eventsync="true">
          <view class="item-subtitle" data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
          <view>
            <image @click.stop="closeAd" class="close-icon" src="https://static.wi-fi.cn/omc/202305/5463183a750a2ebfcdc421e835039d5d8a733531.png" mode=""/>
          </view>
        </view>
      </view>
      <view style="position: relative;" data-eventsync="true">
        <image data-eventsync="true" class="flex-image" :src="this.material_url" mode=""/>
        <image data-eventsync="true" class="logo-sign" style="right: 0rpx;left: auto;" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
      </view>
    </view>
  </view>

  <view class="horizontal-view" @click="jumpUrl"  data-eventsync="true" v-if="this.llgADInfo && this.llgADInfo.type === 5 && show">
    <view class="flex-body" data-eventsync="true">
      <view style="position: relative;" data-eventsync="true">
        <image class="flex-image" data-eventsync="true" :src="this.material_url" mode=""/>
        <image class="logo-sign" data-eventsync="true" style="right: 0rpx;left: auto;" src="https://static.liuliangguo.com/native/2024/09/27/18/ee9e2d7dc561838056496ae864421341.png" ></image>
      </view>
      <view class="flex-column" data-eventsync="true">
        <view class="item-title" data-eventsync="true">{{ this.llgADInfo.title }}</view>
        <view class="flex-item-between" data-eventsync="true">
          <view class="item-subtitle" data-eventsync="true">{{ this.llgADInfo.brand_name }}</view>
          <view>
            <image @click.stop="closeAd" class="close-icon" src="https://static.wi-fi.cn/omc/202305/5463183a750a2ebfcdc421e835039d5d8a733531.png" mode=""/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAdInfo,reportLog } from './main'
export default {
  name: 'llg-flow-info-sdk',
  props: {
  },
  data() {
    return {
      show: false,
      showItem: false,
      clickReport: false,
      isReport: false,
      llgADInfo: null,
      showTime: null,
      material_url: ''
    }
  },
  methods: {
    jumpUrl(){
      let that = this
      let pathUrl = 'pages/web-view/web-view?llgicurl=' + encodeURIComponent(this.llgADInfo.landingpage_url)
      let appId = ''
      if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin'){
        appId = 'wxe0d9e79856533d02'
      }else if (uni.getSystemInfoSync().uniPlatform === 'mp-toutiao'){
        appId = 'tt487d3ec0d74213a601'
      }else if (uni.getSystemInfoSync().uniPlatform === 'mp-kuaishou'){
        appId = 'ks715509393478367393'
      }
      uni.navigateToMiniProgram({
        appId: appId,
        path: pathUrl,
        success(){
          if(that.llgADInfo.click_url.length && !that.clickReport && that.llgADInfo.time && new Date() - new Date(that.llgADInfo.time)< 120000){
            that.clickReport = true
            uni.request({
              url: that.llgADInfo.click_url[0],
              method: 'GET'
            })
          }
          reportLog({
            method: 'adJump',
            data: JSON.stringify(that.llgADInfo),
            adId: that.llgADInfo.adId || ''
          })
        },
        fail(err){
          console.log(123123,err);
        }
      })
    },
    closeAd(){
      this.show = false
      reportLog({
        method: 'closeAd',
        data: JSON.stringify(this.llgADInfo),
        adId: this.llgADInfo.adId || ''
      })
    }
  },
  async mounted() {
    this.llgADInfo = await getAdInfo()
    if (this.llgADInfo){
      this.show = true
      this.material_url= this.llgADInfo.material_infos.length? this.llgADInfo.material_infos[0].material_url : ''
      this.$nextTick(()=>{
        setTimeout(()=>{
          uni.createIntersectionObserver(this, {
            thresholds: [0.2]
          }).relativeToViewport().observe('.horizontal-view', (res) => {
            if (res.intersectionRect.width === 0) {
              return
            }
            this.showItem = !this.showItem
            if(!this.isReport){
              if(this.showItem){
                this.showTime = setTimeout(()=>{
                  this.isReport = true
                  if(this.llgADInfo.show_url.length && this.llgADInfo.time && new Date() - new Date(this.llgADInfo.time)< 120000){
                    uni.request({
                      url: this.llgADInfo.show_url[0],
                      method: 'GET'
                    })
                  }
                },1000)
              }else{
                if(this.showTime){
                  clearTimeout(this.showTime)
                  this.showTime = null
                }
              }
            }
          })

        },500)
      })
    }
  }
};
</script>

<style scoped>
.horizontal-view {
  background-color: #fff;
  padding: 20rpx;
  margin: 25rpx;
  border-radius: 13rpx;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.06);
  position: relative;
}
.horizontal-view-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  font-weight: 500;
  font-size: 27.5rpx;
  color: #333333;
}
.horizontal-view-title2{
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  width: 650rpx;
  color:#fff;
  z-index: 1;
}
.close-image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
.horizontal-view-body {
  position: relative;
  margin-bottom: 20rpx;
}
.body-image {
  width: 660rpx;
  height: 365rpx;
}
.horizontal-view-body2 {
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
  position: relative;
}
.body-image2 {
  height: 802.5rpx;
  width: 447.5rpx;
}

.horizontal-view-bottom {
  display: flex;
  justify-content: space-between;
}
.horizontal-view-bottom-icon {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 25rpx;
  color: #828282;
}
.horizontal-view-bottom-icon-image {
  width: 35rpx;
  height: 35rpx;
  margin-right: 10rpx;
}
.horizontal-view-bottom-btn {
  border: 1rpx solid #2277E4;
  padding: 5rpx;
  color: #2277E4;
  font-size: 28rpx;
  padding: 10rpx 10rpx;
}
.horizontal-view-close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  z-index: 1;
}
.flex-body {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}
.flex-image {
  width: 290rpx;
  height: 190rpx;
}
.flex-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.close-icon {
  width: 40rpx;
  height: 40rpx;
  z-index: 1;
}
.flex-item-between {
  display: flex;
  justify-content: space-between;
}
.logo-sign {
  width: 55rpx !important;
  height: 30rpx !important;
  position: absolute;
  left: 0;
  bottom: 10rpx;
}
.item-title {
  font-weight: 500;
  width: 337.5rpx;
  font-size: 27.5rpx;
  color: #333333;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.item-subtitle {
  font-weight: 500;
  font-size: 24rpx;
  color: #828282;

}
</style>